<template>
  <div class="search-container">
    <div class="search-row no-drag">

      <yd-search  :style=" { marginRight: prop.type === 1 ? `10px` : '0px' , flex : 1}" height="25px"></yd-search>

      <yd-dialog type="click" v-model:show="showUserMenu">
        <span class="add" v-if="prop.type === 1" @click="handleAdd">
        <el-icon><Plus /></el-icon>
        </span>

        <template #dialog>
          <ul class="user-menu">
            <li>
              <span class="iconfont icon-chat" style="font-size: 16px"></span>
              <span>
                发起群聊
              </span>

            </li>
            <li  @click="handleAddContact">
              <span class="iconfont icon-lianxiren" style="font-size: 20px"></span>
              <span>添加朋友</span>
            </li>
            <li>
              <el-icon style="font-size: 18px"><Notebook /></el-icon>
              <span>新建笔记</span>
            </li>
          </ul>
        </template>
      </yd-dialog>

    </div>

  </div>
</template>

<script setup>
import { Notebook, Plus, Search } from '@element-plus/icons-vue'
import ydDialog from '@/components/dialog/absoluteDialog/index.vue'
import ydSearch from '@/components/search/input/index.vue';
import { ref } from 'vue'
const prop = defineProps(['type'])

const showUserMenu = ref(false)

const handleAdd = () => {
  showUserMenu.value = true
  // console.log('点了打开' , showUserMenu.value)
}

const handleAddContact = () => {
  window.ipcRenderer.send('open-new-window' , '/contact/add' , { width: 330 , height : 455})
  showUserMenu.value = false
}

</script>


<style scoped lang="less">
.search-container {
  height: 68px;
  width: 100%;
  padding: 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;


  .search-row {
    display: flex;
    align-items: center;
    height: 25px;
    justify-content: space-between;



    .add {
      background-color: rgb(234, 234, 234);
      height: 25px;
      display: flex;
      width: 30px;
      justify-content: center;
      align-items: center;
      border-radius: 5px;
      cursor: pointer;
    }

    .user-menu {
      display: flex;
      flex-direction: column;
      border-radius: 5px;
      width: 115px;
      box-sizing: border-box;
      -webkit-app-region: no-drag;

      li {
        display: flex;
        justify-content: space-between;
        //padding: 10px;
        border-radius: 5px;
        cursor: pointer;
        color: black;
        height: 40px;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10px;
      }

      li:hover {
        color: white;
        background-color: rgb(7, 193, 96);
      }
    }
  }

}
</style>
